
import { useState } from "react";
/**
 * useState的使用
 * 【说明】：useState是 react hook（函数），允许向组件添加一个状态变量，从而控制组件的渲染结果、也就是数据驱动视图
 *          useState是一个函数，返回一个数组
 * 【语法】：const [count,setCount] = useState(数据)
 *          参数一：状态变量，也就是数据本身
 *          参数二：set函数用于改变状态变量
 *          useState(数据)：useState中的数据是传递到组件中的初始值
 * 【注意】：React Hook名称必须以单词 use 开头
 * 【修改规则】
 *          修改基本类型：在react中中，状态是只读的，通过修改count是数据可以修改但不能引发视图更新的，必须通过setState方法进行修改
 *          修改对象类型：如果修改对象类型的数据，应该通过set方法赋值一个全新的对象来进行修改、也就是使用新值替换老值
 */
// 1、导入 useState()函数
function useStateData() {
  /**
   * 2、获取useState()返回的值
   *    const：状态变量，也就是展示的值
   *    setCount：用于修改状态变量的方法
   */
  const [count, setCount] = useState(0)
  const [user, setUser] = useState({ name: "jack", age: 20 })
  console.log(useState(0));
  // 3、绑定点击事件
  const countClick = () => {
    // 修改基本数据类型
    setCount("nihao")
    // 修改引用数据类型：将所有数据传递进来（如果不传入进来，视为删除），并写入要修改的值
    setUser({ ...user, name: "zhangsan" })
  }
  return (
    <div>
      <div>{user.name} - {user.age}</div>
      <button onClick={countClick}>{count}</button>
    </div>
  )
}


export default useStateData;